<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./static/variables.css">
    <title>Modal</title>
  </head>
  <style></style>

  <body>
    <!-- <wheat-button id="open" type="line">
      打开弹框
    </wheat-button> -->
    <wheat-button onclick="showModal()" id="open" type="line">
      打开弹框
    </wheat-button>
    <wheat-modal title="弹窗" visible="false">
      <div slot="content">
        自定义弹框内容
      </div>
      <div slot="content">
        自定义弹框内容2
      </div>
    </wheat-modal>
    <!-- <wheat-input></wheat-input> -->
  </body>
  <script>
    const MyModalDom = document.querySelector('wheat-modal')

    MyModalDom.addEventListener('onCancel', (value) => {
      const {
        detail: { visible }
      } = value
      console.log('触发取消方法', visible)
      MyModalDom.setAttribute('visible', visible)
    })

    MyModalDom.addEventListener('onConfirm', (value) => {
      console.log('触发确定方法')
      MyModalDom.setAttribute('visible', false)
    })
    const showModal = (value) => {
      MyModalDom.setAttribute('visible', true)
    }
    document.querySelector('wheat-button').click = (value) => {
      console.log(value)
      MyModalDom.setAttribute('visible', true)
    }
  </script>
  <!-- 
    1. web components 基础认识
    2. 组件库相关基础知识
      - 文档站点
      - core code
      - 单元测试
      - 发布部署
      - 版本管控
      - 包管理
    3. 任务分配



   -->
</html>
